﻿@using ATTools.Helpers;
@using ATTools.Models;
@{
    Style.Require("VoiceCommandWidget").AtHead();
}
<div style="display:none;" onclick="openCloseVoiceWidget()" class="VoiceCommandWidget VoiceCommandWidgetOpen" id="VoiceCommandWidget">
<input class="speechwidget" id="sInput" x-webkit-speech="x-webkit-speech" speech="speech"
    onwebkitspeechchange="analyzeSpeech(this.value);" />
<a class="helpVoiceCommandWidget" onclick="openWidgetHelp()">@T("Help")</a>
</div>

<div class="VoiceCommmandWidgetHelp" id="VoiceCommmandWidgetHelp" onclick="closeWidgetHelp()">
    <a class="closeVoiceCommandWidgetHelp" onclick="closeWidgetHelp()">@T("Close")</a>
    <p><strong>Click on the microphone and say:</strong></p>
    @foreach (var command in Model.Commands)
    {
        <p><span class="VoiceCommandSpeechText">"@command.Description"</span>
        @if (command.CommandData.Contains("{value}"))
        {
            <span class="VoiceCommandSpeechFollowText">@T("followed by your text")</span>
        }</p>
    }
</div>

@using (Script.Foot())
{
<script type="text/javascript">
    if (!String.prototype.startsWith) {
        String.prototype.startsWith = function (str) {
            return !this.indexOf(str);
        }
    }

    //Detect support for speech
    if (typeof(document.createElement('input').onwebkitspeechchange) != 'undefined' ) {
        document.getElementById('VoiceCommandWidget').style.display = 'inline';
    }


    var stateKey = 'voiceCommandWidgetState';
    var stateOpen = 'open';
    var stateClosed = 'close';

    //Load state of widget from local storage
    if (typeof(localStorage) != 'undefined' ) {
        try {
            if(localStorage.getItem(stateKey) == null) {
                localStorage.setItem(stateKey, stateOpen);
            }

            //Set state
            if (typeof(localStorage) != 'undefined' ) {
                if (localStorage.getItem(stateKey) == stateOpen) {
                    openWidget();
                } else if(localStorage.getItem(stateKey) == stateClosed) {
                    closeWidget();
                }
            }

        } catch (e) {
        } 
    }

    var Commands = @Html.Raw(JsonHelper.CommandsToJson(Model.Commands));

    function analyzeSpeech(text) {
        text = text.toLowerCase();
        for (index in Commands) {
            var c = Commands[index];
            
            if (text.startsWith(c.command.toLowerCase())) {
                switch(c.type) {
                    case @((byte)CommandType.GoToUrl):
                        var location = c.data.replace(/\{value\}/gi, text.substr(c.command.length + 1));
                        window.location = location;
                        return;
                    case @((byte)CommandType.JavaScript):
                        var script = c.data.replace(/\{value\}/gi, text.substr(c.command.length + 1))
                        eval(script);
                        return;
                    default:
                        break;
                }
            }
        }
    }

    function openWidgetHelp() {
        var voiceCommmandWidgetHelpElement = document.getElementById('VoiceCommmandWidgetHelp');
        voiceCommmandWidgetHelpElement.style.visibility = 'visible';
        voiceCommmandWidgetHelpElement.style.backgroundColor = 'rgba(229,229,229,1.0)';
        voiceCommmandWidgetHelpElement.style.top = '25%';
    }

    function closeWidgetHelp() {
        var voiceCommmandWidgetHelpElement = document.getElementById('VoiceCommmandWidgetHelp');
        voiceCommmandWidgetHelpElement.style.visibility = 'hidden';
        voiceCommmandWidgetHelpElement.style.backgroundColor = 'rgba(229,229,229,0.0)';
        voiceCommmandWidgetHelpElement.style.top = '120%';
    }

    function closeWidget() {
        document.getElementById('VoiceCommandWidget').className = 'VoiceCommandWidget VoiceCommandWidgetClosed';
        localStorage.setItem(stateKey, stateClosed);
    }

    function openWidget() {
        document.getElementById('VoiceCommandWidget').className = 'VoiceCommandWidget VoiceCommandWidgetOpen';
        localStorage.setItem(stateKey, stateOpen);
    }

    function openCloseVoiceWidget() {
        if(window.event.target == document.getElementById('VoiceCommandWidget')) {
            if (typeof(localStorage) != 'undefined' ) {
                if (localStorage.getItem(stateKey) == stateOpen) {
                    closeWidget();
                } else if(localStorage.getItem(stateKey) == stateClosed) {
                    openWidget();
                }
            }
        }
    }

</script>
}